<template>
    <el-form ref="form" label-width="70px" :inline="true" class="login-container" :model="form" :rules="rules">
        <h3 class="login_title">系统登录</h3>
        <el-form-item label="用户名" prop="username">
            <el-input v-model="form.username" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="form.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button @click="submit" style="margin-left:105px;margin-top:10px" type="primary">登录</el-button>
        </el-form-item>
    </el-form>
</template>
<script>
import { sessionData } from '../store/local';
import {getMenu,getToken} from '../api'
import axios from 'axios';
export default{
        data(){
            return  {
                form:{
                    username:'',
                    password:''
                },
                rules:{
                    username:[
                        {required:true,message:'请输入用户名',trigger:"blur"}
                    ],
                    password:[
                        {required:true,message:'请输入密码',trigger:"blur"}
                    ]
                }
            }
        },
        methods:{
            //登录
            submit(){
                // //token信息
                //校验通过
                this.$refs.form.validate((valid)=>{
                    if(valid){
                        //加入请求头token
                        getToken(this.form).then(({data})=>{
                            console.log(data)
                            if(data.code === 20000){
                                // //token信息存入cookie用于不同页面间通信
                                sessionData.set('token',data.access_token)
                                this.$message.success('登录成功')

                                //获取菜单的数据，存入store中
                                // this.$store.commit('setMenu',data.data.menu)
                                // this.$store.commit('addMenu',this.$router)
                                //跳转到首页
                                 this.$router.push('/home')
                            }else{
                                this.$message.error(data.message)
                            }
                        })
                        // axios.post('/api/permission/getMenu', {
                        //         params: {
                        //             token: sessionData.get('token')
                        //         }
                        //         })
                        //         .then((response) => {
                        //         console.log(response.data);
                        //         if(response.data.code === 20000){
                        //         // //token信息存入cookie用于不同页面间通信
                        //         sessionData.set('token',data.data.token)
                        //         this.$message.success('登录成功')

                        //         //获取菜单的数据，存入store中
                        //         this.$store.commit('setMenu',data.data.menu)
                        //         this.$store.commit('addMenu',this.$router)
                        //         //跳转到首页
                        //          this.$router.push('/home')
                        //         }else{
                        //             this.$message.error(data.data.message)
                        //         }
                        //         })
                        //         .catch((error) => {
                        //         console.log(error);
                        //         });
                     }
                })   

            }
        }
    }
</script>
<style lang="less" scoped>
    .login-container{
        width: 350px;
        border: 1px solid #eaeaea;
        margin:180px auto;
        padding: 35px 35px 15px 35px;
        background-color: #fff;
        border-radius: 15px;
        box-shadow: 0 0 25px #cac6c6;
        box-sizing: border-box;
        .login_title{
            text-align: center;
            margin-bottom: 40px;
            color:#505458; 
        }
        .el-input{
            width: 198px;
        }
      }
</style>